<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-input
              class="input"
              placeholder="请输入名称搜索"
              v-model="query.search"
              @input="queryChange"
            >
              <template #append>
                <el-button @click="refresh" :icon="Search" />
              </template>
            </el-input>
          </template>
          <template #right>
            <el-button type="primary" @click="handleCreate">新增节点</el-button>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>

    <!-- 新增/编辑 -->
    <EditDrawer
      v-model="showEdit"
      :type="editType"
      :item="currentItem"
      @update-list="refresh"
    />
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import EditDrawer from "./components/EditDrawer.vue";
import FilterBar from "@/components/FilterBar.vue";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { getNodePageList, deleteNode, getNodeDetail } from "@/api/adaptation";
export default defineComponent({
  name: "AdaptationNode",
  components: {
    Header,
    DynamicTable,
    FilterBar,
    EditDrawer,
  },
  setup(props, { emit, slots }) {
    const query = reactive({
      search: null,
    });
    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      showDetail,
      handleDetail,
    } = useListManage(props, emit, {
      getItems: getNodePageList,
      query: query,
      getDetail: getNodeDetail,
      deleteItem: deleteNode,
      //   tableHeight: document.body.offsetHeight - 220
    });

    const tableColumns = ref([
      {
        label: "节点IP",
        key: "nodeIp",
      },
      {
        label: "端口",
        key: "port",
      },
      {
        label: "备注",
        key: "memo",
      },
      {
        label: "操作",
        fixed: "right",
        width: "200px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                size="small"
                onClick={() => handleUpdate(params.row, params.index)}
              >
                编辑
              </el-button>
            }
            {
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(params.row)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      删除
                    </el-button>
                  ),
                }}
              />
            }
          </span>
        ),
      },
    ]);

    onMounted(() => {
      getList();
    });

    return {
      // 列表数据
      page,
      list,
      total,
      Search,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      // 编辑数据
      editType,
      handleCreate,
      currentItem,
      showEdit,
      refresh,
    };
  },
});
</script>
